<!--
 * @Description  : 
 * @Version      : 1.0
 * @Author       : seraph
 * @Date         : 2025-02-18 17:00:08
 * @LastEditors  : seraph
 * @LastEditTime : 2025-02-20 18:20:36
-->
<template>
  <h3>数组变化侦测</h3>
  <h4>变更方法</h4>
  <p>Vue 能够侦听响应式数组的变更方法，并在它们被调用时触发相关的更新。这些变更方法包括：</p>
  <ul>
    <li>pop()</li>
    <li>shift()</li>
    <li>push()</li>
    <li>unshift()</li>
    <li>splice()</li>
    <li>sort()</li>
    <li>reverse()</li>
  </ul>
  <h4>替换一个数组</h4>
  <p>变更方法，顾名思义，就是会对调用它们的原数组进行变更。相对地，也有一些不可变 (immutable) 方法，例如 filter()，concat() 和
    slice()，这些都不会更改原数组，而总是返回一个新数组。当遇到的是非变更方法时，我们需要将旧的数组替换为新的：</p>
  <pre><code class="javascript" v-html="highlighted(rawCode1, 'javascript')"></code></pre>
  <p>你可能认为这将导致 Vue 丢弃现有的 DOM 并重新渲染整个列表——幸运的是，情况并非如此。Vue 实现了一些巧妙的方法来最大化对 DOM 元素的重用，因此用另一个包含部分重叠对象的数组来做替换，仍会是一种非常高效的操作。
  </p>
</template>



<script lang="ts" setup>
import { ref, nextTick, watch, Ref, onMounted, reactive } from 'vue'
import hljs from 'highlight.js';
import 'highlight.js/styles/atom-one-dark.css';
import javascript from 'highlight.js/lib/languages/javascript';
import html from 'highlight.js/lib/languages/xml';

hljs.registerLanguage('javascript', javascript);
hljs.registerLanguage('html', html);

const highlighted = (code: string, type: string) => {
  return hljs.highlight(code, { language: type }).value.replace(/&amp;lt;/g, '&lt;').replace(/&amp;gt;/g, '&gt;')
}

const getRenderingHTML = (items: { element: Ref<HTMLElement | null>; html: Ref<string> }[]) => {
  items.forEach((item) => {
    nextTick(() => {
      if (item.element.value) {
        item.html.value = item.element.value.outerHTML
      }
    })
  })
}

const rawCode1 = `// items 是一个数组的 ref
items.value = items.value.filter((item) => item.message.match(/Foo/))`

const rawCode2 = ``







</script>


<style scoped>
p {
  font-size: 16px;
  padding: 2px;
  margin: 5px 0;
}

/* 设置预格式化文本的样式 */
pre {
  /* 背景色 */
  background-color: #f1ffed;
  /* 边框 */
  border: 1px solid #ccc;
  /* 缩小内边距 */
  padding: 5px 5px 5px 10px;
  /* 允许滚动 */
  overflow: auto;
  /* 可选：设置上下外边距 */
  margin: 0px 0;
  /* 允许换行 */
  /* normal: 连续的空白字符会被合并为一个空格。文本会在允许的断点处自动换行。
     nowrap：连续的空白字符会被合并为一个空格。文本不会自动换行，即使在允许的断点处也不会换行。
     pre：保留所有的空白字符（包括空格、制表符和换行符）。文本只会在遇到换行符或者 <br> 标签时换行。
     pre-wrap：保留所有的空白字符。文本会在遇到换行符、<br> 标签，或者达到容器边界时换行。
     pre-line：合并连续的空白字符为一个空格，但保留换行符。文本会在遇到换行符、<br> 标签，或者达到容器边界时换行。
   */
  white-space: pre-wrap;
  /* 行高 */
  line-height: 120%;
  /* 定义缩进 */
  tab-size: 4;
}

h3,
h4,
h5,
h6 {
  margin: 25px 0 10px 0;
  line-height: 100%;
}

.bolder {
  font-weight: bolder;
}

.red {
  color: red;
}

button {
  margin: 5px 5px 5px 10px;
  line-height: 150%;
  width: auto;
  padding: 0 10px;
}

.active {
  color: red;
}

.static {
  font-weight: bolder;
}

.text-danger {
  font-style: italic;
}
</style>
